<html>
<head>
    <title>Table Layout</title>
    <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="./adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="./ext-all.js"></script>

    <style type="text/css">
        html, body {
            font: normal 11px verdana;
        }
        #main-panel td {
            padding:5px;
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {
            var panel = new Ext.Panel({
                id:'main-panel',
                baseCls:'x-plain',
                renderTo: Ext.getBody(),
                layout:'table',
                layoutConfig: {columns:3},
                // applied to child components
                defaults: {frame:true, width:200, height: 200},
                items:[{
                    title:'Item 1'
                },{
                    title:'Item 2'
                },{
                    title:'Item 3'
                },{
                    title:'Item 4',
                    width:410,
                    colspan:2
                },{
                    title:'Item 5'
                },{
                    title:'Item 6'
                },{
                    title:'Item 7',
                    width:410,
                    colspan:2
                },{
                    title:'Item 8'
                }]
            });
        });
    </script>
</head>
<body>
<script type="text/javascript" src="./shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
